<template>
  <div class="nav-bar">
    <div class="center">
      <ul>
      <li :class="{active:NavSelect==1}" @click="NavSelect=1">最新发帖</li>
      <li :class="{active:NavSelect==2}" @click="NavSelect=2">热门</li>
    </ul>
    <div><img src="@/assets/icon4.svg" alt=""><span>发表帖子</span></div>
    </div>
  </div>
</template>
<script lang="ts">
  import Vue from 'vue'
  export default Vue.extend({
    data() {
      return {
        NavSelect: 1
      }
    },
  })
</script>

<style scoped>
.nav-bar{
  position: fixed;
  z-index: 200;
  user-select: none;
  width: 100%;
  background: white;
  margin-top: 66px;
}
.nav-bar .center{
  width: 980px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.nav-bar .center ul{
  display: flex;
}
.nav-bar .center ul li{
  padding: 18px;
}
.nav-bar .center ul li.active{
  color: #1fbbf4;
  font-weight: 800;
  border-bottom: 3px solid #1fbbf4;
}
.nav-bar .center div{
  position: absolute; 
  width: 80px;
  height: 20px;
  background: #ffe14c;
  color: #663c0f;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 4px; 
  background: #ffe14c;
  margin-right: auto;
  right: 0;
  top: 50%;
  transform: translateY(-50%); 
}
.nav-bar .center div img{
  width: 20px;
  margin-left:-6px ;
}
.nav-bar .center div span{
  position: absolute;
}
</style>